<template>
  <div class="canvas-view">
    <canvas class="canvas-item" id="myCanvas" width="200" height="200">
    </canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.canvasItem();
  },
  methods: {
    canvasItem() {
      //cancas 所有的设置都是从上往下进行覆盖的
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#ADC98C"; //设置画布颜色

      ctx.beginPath(); // 代表一个局域的开始
      ctx.lineWidth = 4; //线的宽度设置
      ctx.arc(100, 100, 98, 0, 2 * Math.PI); //arc(x,y,r,start,stop ,direction ) 最后一个参数是画笔的方向，默认是顺时针
      ctx.strokeStyle = "#FF0000"; // 设置笔触的线的颜色
      ctx.stroke(); //绘制已定义的路径
      ctx.fill(); //填充当前绘图（路径）
      ctx.closePath(); // 代表一个局域的结束

      ctx.fillStyle = "#FFF"; //改变画布颜色

      ctx.beginPath();
      // ctx.lineWidth= 4;  //因为上面有设置，这个可以不用设置
      ctx.arc(100, 100, 90, 0, 2 * Math.PI);
      ctx.strokeStyle = "#FFBE04"; // 设置笔触的线的颜色
      ctx.stroke();
      ctx.fill();
      ctx.closePath();

      //画一个中国人寿的logo
      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.arc(100, 100, 50, 0, (3 * Math.PI) / 2, false);
      ctx.arc(100, 100, 30, (3 * Math.PI) / 2, 0, true);
      ctx.fillStyle = "#008f49";
      ctx.strokeStyle = "#008f49"; // 设置笔触的线的颜色
      ctx.fill();
      ctx.stroke();
      ctx.closePath(); // 让顶点相连，最后让线连在一起

      //根据上一个圆算出右上角的圆的圆心所在位置
      // 一周的弧度数为2πr/r=2π
      // 360°角=2π弧度 1弧度约为57.3°  弧度 = 2π * (角度/360)

      //根据中国人寿logo右上角的圆可以看出是已大圆的半径做直径
      //圆心的位置在大圆的(X+r/2, Y - r/2) 位置上

      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = "transparent";
      ctx.arc(125, 75, 25, 0, 2 * Math.PI);
      // logo小球渐变是从左下角到右上角的，所以我们找到两个点的坐标
      //设 小球的圆心为 （X ， Y） 半径为r
      // 右上角坐标为 x =  X + r * Math.cos(2π * (角度/360))    y = Y -  r * Math.sin( 2π * (角度/360))
      //               =  X +  r * Math.cos( 2 * Math.PI * (45/360))   y = Y -  r * Math.sin( 2 * Math.PI * (45/360))
      //               =  X + r * Math.cos(Math.PI/4)     y = Y -  r * Math.sin(Math.PI/4)
      //               =  X + r * Math.cos(Math.PI/4)     y = Y -  r * Math.sin(Math.PI/4)
      //所以右上角坐标是(125 + 25 *Math.cos(Math.PI/4) , 75 -  25 * Math.sin(Math.PI/4))
      //同理左下角坐标是(125 - 25*Math.cos(Math.PI/4) , 75 +  25 * Math.sin(Math.PI/4))
      // var grd = ctx.createLinearGradient(125 + 25 * Math.cos(Math.PI / 4), 75 - 25 * Math.sin(Math.PI / 4), 125 - 25 * Math.cos(Math.PI / 4), 75 + 25 * Math.sin(Math.PI / 4));
      // grd.addColorStop(0, "#3F3F3F");
      // grd.addColorStop(1, "#cdcdcd");

      var grd = ctx.createRadialGradient(
        125 - 15 * Math.cos(Math.PI / 4),
        75 + 15 * Math.sin(Math.PI / 4),
        1,
        125 - 50 * Math.cos(Math.PI / 4),
        75 + 50 * Math.sin(Math.PI / 4),
        100
      );
      grd.addColorStop(0, "#fff");
      grd.addColorStop(1, "#000");
      ctx.fillStyle = grd;
      ctx.stroke();
      ctx.fill();
      ctx.closePath();

      //锁画布(为了保存之前的画布状态)

      ctx.save();

      ctx.rotate(Math.PI / 5);
    },
  },
};
</script>
